<!-- 首页 -->
<template>
	<view class="container">
		<TopNav title="学历认证"></TopNav>
		<view class="check-banner progress" v-if="detailData && detailData.status == 0">
			<image src="/static/images/index/check.png" mode=""></image>
			<text>资料正在审核中，请耐心等待。</text>
		</view>
		<view class="check-banner pass" v-else-if="detailData && detailData.status == 1">
			<image src="/static/images/index/pass.png" mode=""></image>
			<text>资料审核通过。</text>
		</view>
		<view class="check-banner reject" v-else-if="detailData && detailData.status == 2">
			<image src="/static/images/index/reject.png" mode=""></image>
			<text>资料审核不通过，请重新提交申请。</text>
		</view>
		<view class="main">
			<view class="f-s15 f-w500 line-height22">
				<text>学历信息</text>
			</view>
			<FormSelect title="我的学历" :value="form.qualification" placeholder="请选择我的学历" picker-title="请选择学历"
				class="m-t11">
				<EducationPicker v-model="form.qualification"></EducationPicker>
			</FormSelect>
			<FormSelect title="我的学校" :value="form.school_name" placeholder="请选择我的学校" picker-title="请选择我的学校"
				:readonly="true" class="m-t11" @click.native="handleToPage">
			</FormSelect>
			<view class="flex justify-end align-center m-t10">
				<text class="f-s14 line-height22 m-r12">对外展示我的学校</text>
				<u-switch size="20" v-model="form.is_show" :inactiveValue="0" :activeValue="1" activeColor="#FE3F59" inactiveColor="#B2B8C1"></u-switch>
			</view>
			<view class="m-t6">
				<view class="">
					<text class="f-w500 f-s15 line-height22">学生证或学历证明</text>
				</view>
				<view class="m-t10">
					<text class="line-height20 text-gray f-s14">注意：1、请上传本人学历证书或者学信网证明；2、上传内容仅审核时查看，不对外展示；</text>
				</view>
			</view>
			<view class="m-t16">
				<UploadImage width="220rpx" height="220rpx" :limit="2" v-model="form.certificates">
					<view class="upload-image">
						<image src="/static/images/login/photo.png" class="width-28" mode="widthFix"></image>
						<text class="m-t8 text-gray f-s12">上传照片</text>
					</view>
				</UploadImage>
			</view>
		</view>
		<view class="fixed-bottom p-lr16" @click="handleConfirm">
			<view class="self-btn full-width" hover-class="pressed">
				<text>确定</text>
			</view>
		</view>
		<Toast></Toast>
		<Modal :show.sync="modalShow" title="提示" content="您是否确认提交审核？\n如果存在正在审核中数据将被覆盖" @confirm="handleModalConfirm()">
		</Modal>
	</view>
</template>

<script>
	import Modal from '@/components/modal'
	import UploadImage from '@/components/upload-image'
	import FormSelect from '@/components/form-select'
	import FormInput from '@/components/form-input'
	import EducationPicker from '@/pages/login/components/education-picker.vue'
	import {
		authStepsDetails,
		educationAuth
	} from "@/api/mine/auth.js"
	export default {
		name: "",
		components: {
			UploadImage,
			FormSelect,
			FormInput,
			Modal,
			EducationPicker,
		},
		data() {
			return {
				modalShow: false,
				detailData: {},
				form: {
					qualification: '',
					school_name: '',
					certificates: '',
					is_show: 0
				}
			}
		},
		onLoad() {
			this.getDetail()
		},
		onUnload() {
			uni.$off('selectSchool', this.handleSelectSchool)
		},
		methods: {
			getDetail() {
				authStepsDetails({
					auth_type: 6
				}).then(res => {
					let {
						data: {
							auth_detail
						}
					} = res
					this.detailData = auth_detail
					for (let key in this.form) {
						this.form[key] = auth_detail[key]
					}
				})
			},
			handleSelectSchool(select) {
				let {
					title
				} = select
				this.form.school_name = title
			},
			handleToPage() {
				uni.$on('selectSchool', this.handleSelectSchool)
				this.$tab.navigateTo("/pages/mine/auth/educational-background/school-search")
			},
			handleModalConfirm() {
				// 学历认证
				this.$modal.loading('正在提交').then(() => {
					educationAuth(this.form).then(res => {
						this.$toast(res.msg)
						this.getDetail()
						this.$modal.closeLoading()
					}).catch(() => this.$modal.closeLoading())
				})
			},
			handleConfirm() {
				if (!this.validateForm(this.form)) return
				this.modalShow = true
			},
			validateForm(form) {
				// 校验学历
				if (!form.qualification) {
					this.$toast('请选择我的学历');
					return false;
				}

				// 校验选择学校
				if (!form.school_name) {
					this.$toast('请选择我的学校');
					return false;
				}

				// 校验学历证明
				if (!form.certificates) {
					this.$toast('请上传相关学历证明');
					return false;
				}

				// 所有校验通过
				return true;
			}

		}
	}
</script>

<style lang="scss">
	@import '@/common/css/var.scss';

	page {
		background-color: #fff;
		@include fixed-bottom;
	}
</style>
<style scoped lang="scss">
	.container {
		.main {
			padding: 24rpx 32rpx;
		}
	}
</style>